<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>data</title>
    
    <style>
        body{
    height: 100%;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    background: linear-gradient(to right, rgb(255, 255, 255), rgb(124, 255, 135));
}
html{
    height: 100%;
    width: 100%;
    margin: 0 auto;
}
.head{
    height: 5%;
    width: 40%;
    
    background-color: black;
    border-radius: 40px;
    transition: width 0.3s, height 0.3s, transform 0.5s;
    text-align: center;
    box-shadow:  100%px 23px 63px #5a5a5a,
    -23px -23px 63px #ffffff;
}
.head:hover{
    height: 30%;
    width: 90%;
    border: 4px solid rgb(255, 118, 118);
    background-color: black;
    border-radius: 60px;

}
.head:visited{
    height: 42%;

}
    </style>

</head>
<body>
    <br>
    <button class="head"></button>
</body>
</html>
